<script setup lang="ts">
import {onMounted, ref} from "vue";
import router from "@/router/index.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteLocationAPI, getLocationListAPI} from "@/apis/location.js";

const current=ref(1);
const pageSize=ref(100);
const locationList=ref([]);

onMounted(async ()=>{
    const res=await getLocationListAPI(current.value,pageSize.value);
    locationList.value=res.data;
})

// const getLocation=async (id:number)=>{
//     await router.push({path:`/manage/locationDetail/${id}`});
// }

const updateLocation=async (id:number)=>{
    await router.push({path:`/manage/locationUpdate/${id}`});
}

const deleteLocation=async (id:number)=>{
    await ElMessageBox.confirm(
        '此操作将删除该位置, 是否继续?',
        'warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await deleteLocationAPI(id);
        locationList.value = locationList.value.filter((location: any) => location.id!== id);
      ElMessage({
        type:'success',
        message: '删除成功!',
      })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}


</script>

<template>
  <el-table
      :data="locationList"
      style="width: 100%"
      stripe
      border
      max-height="800"
      :default-sort="{prop:'userId',order:'ascending',}"
  >
    <el-table-column align="center" prop="userId" fixed label="用户ID" width="70" />
    <el-table-column prop="userName" fixed label="登录名" width="130" />
    <el-table-column prop="realName" fixed label="真实名称" width="130" />

    <el-table-column align="center" prop="projectId" label="项目Id" width="70" />
    <el-table-column prop="projectName" label="项目名称" width="180" />

    <el-table-column align="center" prop="warehouseId" label="仓库Id" width="70" />
    <el-table-column prop="warehouseName" label="仓库名称" width="250" />

    <el-table-column prop="locationAddress" label="所在地地址" width="230" />

    <el-table-column  label="操作" width="220" fixed="right">
      <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                   scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
      <template #default="scope">
        <!--        <el-button size="small" type="warning" plain  @click="router.push({path:`/home/equipment/equipmentDetail/${scope.row.id}`});">详情</el-button>-->
<!--        <el-button size="small" type="warning" plain  @click="getLocation(scope.row.id)">详情</el-button>-->
        <el-button size="small" type="warning" plain  @click="updateLocation(scope.row.id)">修改</el-button>
        <el-button size="small" type="warning" plain  @click="deleteLocation(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">

</style>